<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 加载状态
const loading = ref(true);

// 表单组件引用
const basicFormRef = ref(null);
const notificationFormRef = ref(null);
const wifiFormRef = ref(null);
const bannerFormRef = ref(null);

// 当前激活的标签页
const activeTab = ref('basic');

// 基础信息设置表单
const basicForm = reactive({
    storeName: '棋牌室名称',
    contactPhone: '13812345678',
    contactPerson: '张经理',
    address: '北京市朝阳区xx街道xx号',
    businessHours: '10:00-22:00',
    businessDays: ['1', '2', '3', '4', '5', '6', '7'],
    description: '我们提供舒适的棋牌环境和优质的服务。各种棋牌游戏一应俱全，是您休闲娱乐的好去处。'
});

// 会员等级设置
const memberLevelList = ref([
    { id: 1, name: '普通会员', discount: 10, minPoints: 0, benefits: '无特殊权益' },
    { id: 2, name: '银卡会员', discount: 9.5, minPoints: 500, benefits: '消费享受95折优惠' },
    { id: 3, name: '金卡会员', discount: 9, minPoints: 2000, benefits: '消费享受9折优惠，每月赠送2小时免费体验' },
    { id: 4, name: '钻石会员', discount: 8.5, minPoints: 5000, benefits: '消费享受85折优惠，每月赠送5小时免费体验，生日特别礼遇' }
]);

// 消息通知设置表单
const notificationForm = reactive({
    enableSMS: true,
    enableWechat: true,
    enableApp: true,
    smsSignature: '【棋牌室】',
    registerTemplate: '尊敬的用户，您已成功注册成为会员，感谢您的支持！',
    orderTemplate: '尊敬的用户，您的订单{orderNo}已成功支付，感谢您的光临！',
    appointmentTemplate: '尊敬的用户，您已成功预约{date} {time}的{room}，请按时到达。如需取消，请提前2小时联系我们。'
});

// WiFi设置表单
const wifiForm = reactive({
    enableWifi: true,
    ssid: 'QiPaiShi_FREE',
    password: '12345678',
    freeTime: 2,
    resetFrequency: 'day',
    bandwidthLimit: 1,
    permitWebsites: 'all',
    forbiddenWebsites: ''
});

// 轮播图设置
const bannerList = ref([
    { id: 1, title: '周末活动', image: 'https://via.placeholder.com/800x400?text=Weekend+Event', link: '', status: 'active' },
    { id: 2, title: '会员优惠', image: 'https://via.placeholder.com/800x400?text=Member+Discount', link: '', status: 'active' },
    { id: 3, title: '新增游戏', image: 'https://via.placeholder.com/800x400?text=New+Games', link: '', status: 'inactive' }
]);

// 业务日选项
const businessDaysOptions = [
    { label: '周一', value: '1' },
    { label: '周二', value: '2' },
    { label: '周三', value: '3' },
    { label: '周四', value: '4' },
    { label: '周五', value: '5' },
    { label: '周六', value: '6' },
    { label: '周日', value: '7' }
];

// WiFi重置周期选项
const resetFrequencyOptions = [
    { label: '每天', value: 'day' },
    { label: '每周', value: 'week' },
    { label: '每月', value: 'month' },
    { label: '从不', value: 'never' }
];

// 保存基础信息设置
const saveBasicSettings = () => {
    if (!basicFormRef.value) return;

    basicFormRef.value.validate((valid) => {
        if (!valid) return;

        ElMessage.success('基础信息设置保存成功');
    });
};

// 保存消息通知设置
const saveNotificationSettings = () => {
    if (!notificationFormRef.value) return;

    notificationFormRef.value.validate((valid) => {
        if (!valid) return;

        ElMessage.success('消息通知设置保存成功');
    });
};

// 保存WiFi设置
const saveWifiSettings = () => {
    if (!wifiFormRef.value) return;

    wifiFormRef.value.validate((valid) => {
        if (!valid) return;

        ElMessage.success('WiFi设置保存成功');
    });
};

// 添加会员等级
const handleAddLevel = () => {
    const newId = Math.max(...memberLevelList.value.map(level => level.id), 0) + 1;

    memberLevelList.value.push({
        id: newId,
        name: '新会员等级',
        discount: 10,
        minPoints: 0,
        benefits: ''
    });
};

// 删除会员等级
const handleDeleteLevel = (index, row) => {
    ElMessageBox.confirm(`确定要删除会员等级"${row.name}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        memberLevelList.value.splice(index, 1);
        ElMessage.success('删除成功');
    }).catch(() => { });
};

// 保存会员等级设置
const saveMemberLevelSettings = () => {
    ElMessage.success('会员等级设置保存成功');
};

// 添加轮播图
const handleAddBanner = () => {
    const newId = Math.max(...bannerList.value.map(banner => banner.id), 0) + 1;

    bannerList.value.push({
        id: newId,
        title: '新轮播图',
        image: 'https://via.placeholder.com/800x400?text=New+Banner',
        link: '',
        status: 'inactive'
    });
};

// 删除轮播图
const handleDeleteBanner = (index, row) => {
    ElMessageBox.confirm(`确定要删除轮播图"${row.title}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        bannerList.value.splice(index, 1);
        ElMessage.success('删除成功');
    }).catch(() => { });
};

// 保存轮播图设置
const saveBannerSettings = () => {
    ElMessage.success('轮播图设置保存成功');
};

// 上传图片回调
const handleImageSuccess = (response, file, fileList) => {
    ElMessage.success('图片上传成功');
};

// 初始化加载
onMounted(() => {
    // 模拟加载数据
    setTimeout(() => {
        loading.value = false;
    }, 500);
});
</script>

<template>
    <div class="setting-container" v-loading="loading">
        <!-- 页面标题 -->
        <div class="page-header">
            <h2>系统设置</h2>
        </div>

        <!-- 设置内容 -->
        <el-card>
            <el-tabs v-model="activeTab" tab-position="left" class="setting-tabs">
                <!-- 基础信息设置 -->
                <el-tab-pane label="基础信息" name="basic">
                    <h3 class="setting-title">基础信息设置</h3>
                    <el-form ref="basicFormRef" :model="basicForm" label-width="120px" class="setting-form">
                        <el-form-item label="店铺名称" prop="storeName" required>
                            <el-input v-model="basicForm.storeName" placeholder="请输入店铺名称" />
                        </el-form-item>
                        <el-form-item label="联系电话" prop="contactPhone" required>
                            <el-input v-model="basicForm.contactPhone" placeholder="请输入联系电话" />
                        </el-form-item>
                        <el-form-item label="联系人" prop="contactPerson">
                            <el-input v-model="basicForm.contactPerson" placeholder="请输入联系人" />
                        </el-form-item>
                        <el-form-item label="店铺地址" prop="address">
                            <el-input v-model="basicForm.address" placeholder="请输入店铺地址" />
                        </el-form-item>
                        <el-form-item label="营业时间" prop="businessHours">
                            <el-input v-model="basicForm.businessHours" placeholder="请输入营业时间，如：9:00-22:00" />
                        </el-form-item>
                        <el-form-item label="营业日" prop="businessDays">
                            <el-checkbox-group v-model="basicForm.businessDays">
                                <el-checkbox v-for="item in businessDaysOptions" :key="item.value" :label="item.value">
                                    {{ item.label }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="店铺简介" prop="description">
                            <el-input v-model="basicForm.description" type="textarea" rows="4" placeholder="请输入店铺简介" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <!-- 会员等级设置 -->
                <el-tab-pane label="会员等级" name="memberLevel">
                    <div class="setting-header">
                        <h3 class="setting-title">会员等级设置</h3>
                        <el-button type="primary" size="small" @click="handleAddLevel">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            添加等级
                        </el-button>
                    </div>
                    <el-table :data="memberLevelList" border style="width: 100%">
                        <el-table-column prop="name" label="等级名称" width="150">
                            <template #default="{ row }">
                                <el-input v-model="row.name" size="small" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="discount" label="折扣率" width="120">
                            <template #default="{ row }">
                                <el-input-number v-model="row.discount" :min="0" :max="10" :step="0.1" size="small" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="minPoints" label="所需积分" width="120">
                            <template #default="{ row }">
                                <el-input-number v-model="row.minPoints" :min="0" :step="100" size="small" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="benefits" label="会员权益">
                            <template #default="{ row }">
                                <el-input v-model="row.benefits" size="small" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template #default="scope">
                                <el-button type="danger" size="small"
                                    @click="handleDeleteLevel(scope.$index, scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="button-container">
                        <el-button type="primary" @click="saveMemberLevelSettings">保存设置</el-button>
                    </div>
                </el-tab-pane>

                <!-- 通知设置 -->
                <el-tab-pane label="消息通知" name="notification">
                    <h3 class="setting-title">消息通知设置</h3>
                    <el-form ref="notificationFormRef" :model="notificationForm" label-width="120px"
                        class="setting-form">
                        <el-form-item label="启用短信通知">
                            <el-switch v-model="notificationForm.enableSMS" />
                        </el-form-item>
                        <el-form-item label="启用微信通知">
                            <el-switch v-model="notificationForm.enableWechat" />
                        </el-form-item>
                        <el-form-item label="启用APP通知">
                            <el-switch v-model="notificationForm.enableApp" />
                        </el-form-item>
                        <el-form-item label="短信签名" prop="smsSignature">
                            <el-input v-model="notificationForm.smsSignature" placeholder="请输入短信签名" />
                        </el-form-item>
                        <el-form-item label="注册模板" prop="registerTemplate">
                            <el-input v-model="notificationForm.registerTemplate" type="textarea" rows="3"
                                placeholder="请输入注册通知模板内容" />
                        </el-form-item>
                        <el-form-item label="订单模板" prop="orderTemplate">
                            <el-input v-model="notificationForm.orderTemplate" type="textarea" rows="3"
                                placeholder="请输入订单通知模板内容" />
                        </el-form-item>
                        <el-form-item label="预约模板" prop="appointmentTemplate">
                            <el-input v-model="notificationForm.appointmentTemplate" type="textarea" rows="3"
                                placeholder="请输入预约通知模板内容" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <!-- WiFi设置 -->
                <el-tab-pane label="WiFi设置" name="wifi">
                    <h3 class="setting-title">WiFi设置</h3>
                    <el-form ref="wifiFormRef" :model="wifiForm" label-width="120px" class="setting-form">
                        <el-form-item label="启用WiFi">
                            <el-switch v-model="wifiForm.enableWifi" />
                        </el-form-item>
                        <el-form-item label="WiFi名称" prop="ssid">
                            <el-input v-model="wifiForm.ssid" placeholder="请输入WiFi名称" />
                        </el-form-item>
                        <el-form-item label="WiFi密码" prop="password">
                            <el-input v-model="wifiForm.password" placeholder="请输入WiFi密码" show-password />
                        </el-form-item>
                        <el-form-item label="免费时长(小时)" prop="freeTime">
                            <el-input-number v-model="wifiForm.freeTime" :min="0" :max="24" />
                        </el-form-item>
                        <el-form-item label="重置周期" prop="resetFrequency">
                            <el-select v-model="wifiForm.resetFrequency" placeholder="请选择重置周期">
                                <el-option v-for="item in resetFrequencyOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="带宽限制(Mbps)" prop="bandwidthLimit">
                            <el-input-number v-model="wifiForm.bandwidthLimit" :min="0" :max="100" />
                        </el-form-item>
                        <el-form-item label="允许网站" prop="permitWebsites">
                            <el-radio v-model="wifiForm.permitWebsites" label="all">允许所有网站</el-radio>
                            <el-radio v-model="wifiForm.permitWebsites" label="custom">自定义白名单</el-radio>
                        </el-form-item>
                        <el-form-item label="禁止网站" prop="forbiddenWebsites">
                            <el-input v-model="wifiForm.forbiddenWebsites" type="textarea" rows="3"
                                placeholder="请输入禁止访问的网站域名，每行一个" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="saveWifiSettings">保存设置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <!-- 轮播图设置 -->
                <el-tab-pane label="轮播图设置" name="banner">
                    <div class="setting-header">
                        <h3 class="setting-title">轮播图设置</h3>
                        <el-button type="primary" size="small" @click="handleAddBanner">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            添加轮播图
                        </el-button>
                    </div>
                    <el-table :data="bannerList" border style="width: 100%">
                        <el-table-column prop="title" label="标题" width="150">
                            <template #default="{ row }">
                                <el-input v-model="row.title" size="small" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="image" label="图片" width="220">
                            <template #default="{ row }">
                                <div class="image-preview">
                                    <img :src="row.image" class="banner-image" />
                                    <el-upload class="upload-button" action="#" :show-file-list="false"
                                        :on-success="handleImageSuccess">
                                        <el-button size="small" type="primary">更换图片</el-button>
                                    </el-upload>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="link" label="链接">
                            <template #default="{ row }">
                                <el-input v-model="row.link" size="small" placeholder="点击跳转链接" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="120">
                            <template #default="{ row }">
                                <el-select v-model="row.status" size="small">
                                    <el-option label="启用" value="active" />
                                    <el-option label="禁用" value="inactive" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template #default="scope">
                                <el-button type="danger" size="small"
                                    @click="handleDeleteBanner(scope.$index, scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="button-container">
                        <el-button type="primary" @click="saveBannerSettings">保存设置</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<style scoped>
.setting-container {
    padding: 20px;
}

.page-header {
    margin-bottom: 20px;
}

.setting-tabs {
    min-height: 500px;
}

.setting-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 500;
    color: #303133;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
}

.setting-form {
    max-width: 600px;
}

.setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.button-container {
    margin-top: 20px;
    text-align: right;
}

.image-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.banner-image {
    width: 200px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}
</style>
